<template>
<!--登录页面-->
  <div>
    <div class="login-box" v-if="ifVisible">
      <h2> <a @click="drawer = true" style="left: 60px; color:#e3fcff; font-size: 35px" class="admin_sty">Login</a></h2>
      <el-form :model="user" ref="user">
<!--email输入框 -->
        <el-form-item prop="email">
          <div class="user-box">
            <el-input
                type="text"
                v-model="user.email"
                @focus="userFocusEvent"
                @blur="userBlurEvent"
                clearable="true"
            ></el-input>
            <label :class="[{'restore_style': userChangeIndex == 0},{'float_style': userChangeIndex == 1}]">
              <i class="el-icon-user"></i>
            </label>
          </div>
        </el-form-item>
<!--password输入框 -->
        <el-form-item prop="password">
          <div class="user-box">
            <el-input
                type="password"
                v-model="user.password"
                @focus="pwdFocusEvent"
                @blur="pwdBlurEvent"
                clearable="true"
            ></el-input>
            <label :class="[{'restore_style': pwdChangeIndex == 0},{'float_style': pwdChangeIndex == 1}]">
              <i class="el-icon-lock"></i>
            </label>
          </div>
        </el-form-item>
<!--登录和注册按钮-->
        <el-form-item>
          <el-button href="javascript:void(0)" @click="handleSubmit('user')" style="right: 60px">登录</el-button>
          <el-button href="javascript:void(0)" @click="signUp_asd" style="left: 60px">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--注册 -->
    <el-dialog :visible.sync="logVisible" :before-close="handleClose">
      <register/>
    </el-dialog>

    <!--管理员登录-->
    <el-drawer
        :visible.sync="drawer"
        with-header="false"
        :direction="direction"
    >
      <admin_login></admin_login>
    </el-drawer>

  </div>
</template>

<script>
import register from "@/components/proscenium/register";
import {getToken, setToken,setSession} from "@/utils/Token";
import {login} from "@/api/api";
import {login_free} from "@/api/api";
import admin_login from "@/components/tiring/admin_login";

export default {
  name: "Login",
  components: {
    register,
    admin_login
   },
  data() {
    return {
      // 后台
      drawer: false,
      direction: 'rtl',
 /*用于切换登录*/
      ifVisible:true,
      logVisible:false,
/*展示不同样式*/
      userChangeIndex:0,
      pwdChangeIndex:0,
/*登录对应的信息*/
      user: {
            email:'',
            password:''
          },
/*验证是否通过*/
      msg: ''
    }
  },
  methods: {
// 用户名输入框获取焦点事件
    userFocusEvent(){
      this.userChangeIndex = 1;
    },
    //用户名失去焦点事件
    userBlurEvent(){
      if (this.user.email.trim() === ''){
        this.userChangeIndex = 0;
      }else {
        this.userChangeIndex = 1;
      }

    },
// 密码框获取焦点事件
    pwdFocusEvent(){
      this.pwdChangeIndex = 1;
    },
// 密码框失去焦点事件
    pwdBlurEvent(){
      if (this.user.password ===''){
        this.pwdChangeIndex = 0;
      }else {
        this.pwdChangeIndex = 1;
      }
    },
// 调整登录框和注册对话框的显示
    signUp_asd(){
      this.logVisible = true;
      this.ifVisible=false;
    },
// 注册框消失后登录框显示
    handleClose(done){
      done();
      this.ifVisible=true
    },
/*登录验证*/
    handleSubmit(user) {
      this.$refs[user].validate((valid) =>{
        if(valid){
          login(this.user).then((res) => {
            if(res.data.status === 200){
              setToken('userId',res.data.data.id)
              setToken('userIcon',res.data.data.icon)
              setToken('userNickName',res.data.data.nickName)
              setToken('token', res.data.data.token)
              setSession('index','1')
              this.$message({message: res.data.msg,type:'success'})
              this.$router.push('/main');
            }else {

            }
          })
        }else {

        }
      })
    },
    /*进入后台*/
    tiring(){
      this.$router.push('/tiring');
    }
  },
  /*创建时免登录请求*/
  created() {
      if(getToken('token') != null){
        login_free().then((res)=>{
          if(res.data.status === 200){
            setToken('userId',res.data.data.id)
            setToken('userIcon',res.data.data.icon)
            setToken('userNickName',res.data.data.nickName)
            setSession('index','1')
            this.$router.push('/main');
          }else {
            this.$message({message: res.data.msg,type:'warning'})
          }
        })
      }
  },

  /*当页面创建时添加背景*/
  beforeCreate() {
    document.querySelector('body').classList.add("loginBgc");
  },
  /*当页面销毁时删除背景*/
  beforeDestroy() {
    document.querySelector('body').classList.remove("loginBgc");
    sessionStorage.setItem('title','主页-全部');
  }
};


</script>

<style>
/*背景图片*/
.loginBgc{
  background-image: url("../../assets/logBackground.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
  margin: 0px;
}

/*注册css*/
.el-dialog{
  background: transparent !important;
  width: 25% !important;
}

/*注册框样式*/
.el-dialog{
  background: transparent !important;
  width: 25% !important;
}

/*登录样式一*/
.login-box {
  position: absolute;
  /*让盒子居中*/
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  /*让盒子向左向右偏移一半使其位于中心*/
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.3);
  /*padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在内容中*/
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
/*登录样式二*/
.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  font-size: 30px;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

/*输入框样式*/
.login-box .user-box .el-input__inner{
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  /*margin-bottom: 30px;*/
  border: none;
  border-bottom: 2px solid #fff;
  /*点击时的边框透明*/
  outline: none;
  /*设置背景透明*/
  background: transparent;
}

/*登录框提示图标原始样式*/
.login-box .user-box .restore_style {
  position: absolute;
  top: -5px;
  left: 0;
  padding: 10px 0;
  font-size: 20px;
  color: #fff;
  transition: 0.5s;
}

/*登录框输入时样式*/
.login-box .user-box .float_style {
  position: absolute;
  top: -20px !important;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
  transition: 0.3s;
}

/*按钮样式*/
.login-box form .el-button {
  position: relative;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  /*去下划线*/
  text-decoration: none;
  /*点击按钮时的延时效果*/
  transition:0.5s;
  margin-top: 40px;
  background: transparent;
  border: none;
}

/*点击按钮样式*/
.login-box .el-button:hover{
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  /*设置按钮的阴影*/
  box-shadow: 0 0 5px #03e9f4,
  0 0 25px #03e9f4,
  0 0 50px #03e9f4,
  0 0 100px #03e9f4;
}

</style>